<template>
  <a-spin :spinning="loading">
    <div v-if="authInfo.name">
      <div class="_header">
        <div>
          <span class="title">{{ authInfo.name }}</span>
          <a-icon type="sync" class="icon" @click="GetAuthStatus(true)" />
        </div>
        <div class="desc">APPID：{{ authInfo.appid }}</div>
        <div class="desc">
          提审类目：
          <span v-for="(item, index) in authInfo.categorieList" :key="index">
            <span>{{ item.first }}></span>
            <span>{{ item.second }}</span>
            <span v-if="index < authInfo.categorieList.length - 1">；</span>
          </span>
        </div>
        <a-button type="primary" @click="handleBind">重新授权</a-button>
      </div>
    </div>

    <div v-else>
      <div class="_header">
        <div>
          <span class="title">微信小程序</span>
        </div>
      </div>

      <div class="content">
        <div class="box">
          <div class="title">已注册小程序</div>
          <div class="desc">点击下方绑定授权，授权成功后可创建自己的小程序</div>
          <a-button type="primary" @click="handleBind">立即绑定</a-button>
        </div>

        <div class="box">
          <div class="title">未注册小程序</div>
          <div class="desc">
            点击下方按钮前往公众平台注册（目前仅支持『企业』类型的主体）；注册成功后，再进行绑定授权。
          </div>
          <a-button @click="handleToOfficial">官方注册</a-button>
        </div>
      </div>
    </div>

    <TipModal ref="tipModal" @reload="GetAuthStatus" />
  </a-spin>
</template>

<script>
import { getAuthUrl, getAuthStatus } from '@/api/system/system'
import Vue from 'vue'
import { TENANTID } from '@/store/mutation-types'
import TipModal from '../../../components/tipModal.vue'
export default {
  components: {
    TipModal,
  },
  data() {
    return {
      params: {
        authType: 2,
        tenantId: Vue.ls.get(TENANTID),
        // redirectUri: process.env.VUE_APP_MODEL_BASE_URL.replace('/api', '') + '/system/miniProgramManager',
        redirectUri: `${window.origin}/system/miniProgramManager`,
      },
      authInfo: {},
      loading: true,
    }
  },
  computed: {},
  watch: {},
  methods: {
    async handleBind() {
      try {
        let res = await getAuthUrl(this.params)
        window.open(res)
        this.$refs.tipModal.show()
      } catch (error) {
        console.error(error)
      }
    },
    async GetAuthStatus(reload) {
      try {
        this.loading = true
        let res = await getAuthStatus(this.params)
        this.authInfo = res.data || {}
        if (reload) this.$message.success('更新成功')
        this.loading = false
      } catch (error) {
        console.log(error)
        if (reload) this.$message.success('更新失败')
        this.loading = false
      }
    },
    handleToOfficial() {
      window.open('https://mp.weixin.qq.com')
    },
  },
  created() {
    this.GetAuthStatus()
  },
  mounted() {},
}
</script>
<style lang="less" scoped>
._header {
  width: 100%;
  background: #fff;
  padding: 20px;

  .title {
    font-size: 24px;
    font-weight: bold;
  }

  .desc {
    margin-top: 20px;
    margin-bottom: 10px;
  }

  .icon {
    font-size: 24px;
    font-weight: bold;
    margin-left: 20px;
    cursor: pointer;
  }
}

.content {
  display: flex;
  margin-top: 20px;

  .box {
    width: 380px;
    height: 250px;
    border-radius: 10px;
    background: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 15px;

    .title {
      font-size: 16px;
      font-weight: bold;
    }

    .desc {
      margin: 30px 0;
    }
  }

  .box:nth-child(2) {
    margin-left: 20px;
  }
}
</style>